<template>
  <div>
    <h2>Login</h2>
    <span>Message: {{ msg }}</span>
    {{ i }}
  </div>
</template>

<script setup>
// 如果引入模块中资源，则直接使用模块名称即可
// 如何使用ref定义响应式变量
import { ref } from 'vue'
// const msg = 'Welcome'
// let i = 10
// 在setup语法糖中定义的响应式变量都应该使用ref声明

const msg = ref('Welcome')
let i = ref(99)
</script>

<!-- <script>
export default {
  // 组合式：所有的成员都合并到一起
  // setup() {
  //   const pi = 3.14
  //   const msg = 'Hello,Neu!'
  //   const fu1 = function name(params) {}
  //   return {
  //     count: 1,
  //     msg: 'Hello,Neu!'
  //   }
  // }

  // data() {
  //   return {
  //     count: 1,
  //     msg: 'Hello,Neu!'
  //   }
  // },

  // // `mounted` 是生命周期钩子，之后我们会讲到
  // mounted() {
  //   // `this` 指向当前组件实例
  //   console.log(this.count) // => 1

  //   // 数据属性也可以被更改
  //   this.count = 2
  // }
} -->
<!-- </script> -->
